<template>
  <div class="bettingRecord">
    <div class="betRecNavTitle">
      <p v-for="(recNavTitItem,recNavTitIndex) in betRecNavTitData"><span
          :class="{amount:true,on:curRecNavIndex == recNavTitIndex}" @click="recNavTitEvent(recNavTitIndex)">{{recNavTitItem}}</span><span
          v-if="recNavTitIndex<betRecNavTitData.length-1">|</span></p>
    </div>
    <div class="bettingRecordQuery displayFlex">
      <div class="accountSelect">
        <div v-if="curRecNavIndex == '0'">
          <Select v-model="lotteryId" class='allLottery' size="large" style="width:160px; margin-right: 6px;">
            <Option v-for="(colorDataItem,colorDataIndex) in colorDataList" :value="colorDataItem.code"
                    :key="colorDataIndex">
              {{colorDataItem.name}}<span v-if="colorDataItem.type==1||colorDataItem.type==2">[{{colorDataItem.type==1?'官':'信'}}]</span>
            </Option>
          </Select>
          <Select v-model="bettingStatus" size="large" style="width:160px;">
            <Option v-for="bettingStatusItem in bettingStatusList" :value="bettingStatusItem.id"
                    :key="bettingStatusItem.id">{{bettingStatusItem.name}}
            </Option>
          </Select>
        </div>
      </div>
      <div class="accountInput displayFlex">
        <section>
          <Row>
            <Col span="12">
            <DatePicker type="date" v-model="startTime" @on-change="changeStartTime" size='large' :options="dateOptions"
                        :editable='false'
                        :transfer='true'
                        placeholder="请选择开始日期" style="width: 200px; margin-right: 20px;"></DatePicker>
            </Col>
            <Col span="12">
            <DatePicker type="date" v-model="endTime" @on-change='changeEndTime' size='large' :endTime='endTime'
                        :options="dateOptions"
                        :editable='false' :transfer='true'
                        placement="bottom-end" placeholder="请选择结束日期" style="width: 200px;"></DatePicker>
            </Col>
          </Row>
        </section>
        <section class="accountBtnCx accountBtnCxBtn" style="margin-left: 2px;">
          <p @click='inquireData'>查询</p>
        </section>
      </div>
    </div>
    <div class="latestBetting" v-if="curRecNavIndex == '0'">
      <div class="bettingTable">
        <ul class="bettingTableItem bettingTableTitle displayFlex">
          <li v-for="tableTitleItem in bettingTableTitleData">{{tableTitleItem}}</li>
        </ul>
        <div class="tableContent bettingRecordTable scrollBar">
          <ul class="bettingTableItem bettingTableInfo displayFlex" v-for="bettingTableItem in bettingTableData">
            <li><p>{{_Util.formatDateTime(bettingTableItem.actionTime)}}</p></li>
            <li><p class="relative"><i
                :class="{officialIcon:bettingTableItem.isOfficial,creditIcon:!bettingTableItem.isOfficial}"></i>{{bettingTableItem.lotteryName}}
            </p>
              <p>玩法:{{bettingTableItem.playedGroupName}}-{{bettingTableItem.playedName}}</p>
            </li>
            <li><p>{{bettingTableItem.odds}}</p></li>
            <li><p>{{bettingTableItem.amount}}</p></li>
            <li><p>{{bettingTableItem.bonus}}</p></li>
            <li>
              <p class="one-txt-cut" :title='bettingTableItem.lotteryNo'>{{bettingTableItem.lotteryNo || '------'}}</p>
              <p>期号:{{bettingTableItem.actionNo}}</p>
            </li>
            <li>
              <p :class="{'red': parseInt(bettingTableItem.status) === 4, 'green': parseInt(bettingTableItem.status) === 1}">
                {{bettingTableItem.statusText}}</p></li>
            </li>
            <li>
              <router-link class="relative"
                           :to="{name:'recordDetail',query:{orderId:bettingTableItem.orderId, treeIndex:'2'}}" tag='p'>
                <i class="viewDetailsIcon"></i>查看详情
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="pageDevice" v-if="bettingTableData.length>0">
        <Page :total="totalPage" :pageSize='perPageNum' :current="currentPage" :showTotal='true'
              @on-change="changeCurrentPage"></Page>
      </div>
      <div class="emptyData" v-else>
        <img :src="emptyDataIcon" alt="">
        <p>近期没有投注记录</p>
      </div>
    </div>
    <!--电游投注记录-->
    <div class="latestBetting" v-if="curRecNavIndex == '1'">
      <div class="bettingTable">
        <ul class="bettingTableItem bettingTableTitle fgBetTabTitInfo displayFlex">
          <li v-for="tableTitleItem in bettingTableTitleData">{{tableTitleItem}}</li>
        </ul>
        <div class="tableContent bettingRecordTable scrollBar">
          <ul v-if="latFgBetData.length>0" class="bettingTableItem bettingTableInfo fgBetListInfo displayFlex"
              v-for="userInfo in latFgBetData">
            <li><p>{{userInfo.createTime}}</p></li>
            <li><p class="relative">{{userInfo.gameName}}</p></li>
            <li><p>{{userInfo.orderId}}</p></li>
            <li><p>{{userInfo.allBets}}</p></li>
            <li><p>{{userInfo.allWins}}</p></li>
            <li><p :class="{'red': parseInt(userInfo.result)<0, 'green': parseInt(userInfo.result) >0}">
              {{userInfo.result}}</p></li>
          </ul>
        </div>
      </div>
      <div class="pageDevice" v-if="latFgBetData.length>0">
        <Page :total="totalPage" :pageSize='perPageNum' :current="currentPage" :showTotal='true'
              @on-change="changeCurrentPage"></Page>
      </div>
      <div class="emptyData" v-else>
        <img :src="emptyDataIcon" alt="">
        <p>近期没有投注记录</p>
      </div>
    </div>
  </div>
</template>

<script>
  import './main.scss'
  
  export default {
    data() {
      return {
        bettingTableTitleData: ['投注时间', '彩种玩法', '奖金/赔率', '投注金额', '中奖金额', '开奖号码 & 期号', '状态', '操作'],
        betRecNavTitData: ['彩票游戏投注', '电子游戏投注'],
        curRecNavIndex: 0,//当前投注记录导航下标
        bettingTableData: [],//投注表格数据
        latFgBetData: [],//电游投注表格数据
        lotteryId: '0',//查询中的彩种id
        bettingStatus: '-1',
        colorDataList: [],
        emptyDataIcon: require('../../../assets/images/personal/myLottery/emptyData.png'),//空数据
        bettingStatusList: [
          {id: '-1', name: '所有状态'},
          {id: '0', name: '撤单'},
          {id: '3', name: '未中奖'},
          {id: '2', name: '开奖中'},
          {id: '4', name: '已派奖'},
          {id: '1', name: '未开奖'},
          {id: '10', name: '退款'},
        ],
        dateOptions: {
          disabledDate(date) {
            return date && date.valueOf() > Date.now();
          }
        },
        startTime: '',//开始时间
        endTime: '',//结束时间
        currentPage: 1,//当前页数
        totalPage: 0,//总条数
        perPageNum: 15,//每页数
      }
    },
    mounted() {
    },
    activated() {
      this.init();
    },
    methods: {
      init() {
        this.curRecNavIndex = this.$route.query.betType == '1' ? 1 : 0;
        this.initPage();
      },
      initData() {
        this.currentPage = 1;
        this.startTime = '';
        this.endTime = '';
        this.lotteryId = '0';
        this.bettingStatus = '-1';
        this.bettingTableTitleData = ['投注时间', '彩种玩法', '奖金/赔率', '投注金额', '中奖金额', '开奖号码 & 期号', '状态', '操作'];
      },
      initFGData() {
        this.currentPage = 1;
        this.startTime = '';
        this.endTime = '';
        this.bettingTableTitleData = ['投注时间', '彩种玩法', '订单号', '投注金额', '中奖金额', '输赢'];
      },
      initPage() {
        if (this.curRecNavIndex == '1') {
          this.initFGData();
          this.getFgBetData();
        } else {
          this.getAllLottery();
          this.initData();
          this.getLotteryBetInfo();
        }
      },
      //获取所有彩种信息
      getAllLottery() {
        let that = this;
        that._Util.post(that, that._Api.POST_LOTTERY_ALL_DATA, {}, (data) => {
          that.colorDataList = data;
          that.colorDataList.unshift({code: '0', name: '全部彩种'});
        })
      },
      //获取投注信息
      getLotteryBetInfo() {
        let that = this;
        let params = {
          pageSize: that.perPageNum,
          pageNum: that.currentPage,
          status: that.bettingStatus == -1 ? '' : that.bettingStatus,
          lotteryCode: that.lotteryId == 0 ? '' : that.lotteryId,
          startStr: that.startTime,
          endStr: that.endTime,
        };
        that._Util.post(that, that._Api.POST_LOTTERY_BTEEING_DATA, params, (data) => {
          that.bettingTableData = data.result;
          that.perPageNum = data.pageSize;
          that.totalPage = data.total;
          that.currentPage = data.pageNum;
        })
      },
      //获取电游投注记录
      getFgBetData() {
        let that = this;
        let params = {
          pageSize: that.perPageNum,
          pageNum: that.currentPage,
          startStr: that.startTime,
          endStr: that.endTime,
        }
        that._Util.post(that, that._Api.GET_FG_BET_LIST_DATA, params, (data) => {
          that.latFgBetData = data.result || [];
          that.perPageNum = data.pageSize;
          that.totalPage = data.total;
          that.currentPage = data.pageNum;
        });
      },
      //查询数据
      inquireData() {
        let that = this;
        that.currentPage = 1;
        that.perPageNum = 15;
        if (this.curRecNavIndex == '1') {
          that.getFgBetData();
        } else {
          that.getLotteryBetInfo();
        }
      },
      //记录导航切换
      recNavTitEvent(val) {
        this.curRecNavIndex = val;
        this.initPage();
      },
      //当前页数改变
      changeCurrentPage(val) {
        this.currentPage = val;
        if (this.curRecNavIndex == '1') {
          this.getFgBetData();
        } else {
          this.getLotteryBetInfo();
        }
      },
      //改变开始时间
      changeStartTime(val) {
        this.startTime = val;
      },
      //改变结束时间
      changeEndTime(val) {
        this.endTime = val;
      },
    },
    components: {},
    watch: {}
  }
</script>

<style lang="css" rel="styleheet/css">

</style>
